{% extends "data_grid.html" %}
{% load i18n static iclock_tags common %}
{% block main_body %}
    {% csrf_token %}
  <div class="layui-row layui-col-space15" style="margin-top: 0px; margin-bottom:0px">
    <div class="layui-col-md2">
      <div class="layui-card side-grid-tree">
        <div class="layui-card-header">
          <a href="javascript:void(0);">
            <span id="{{ model_name }}_show_all"><i class="fa fa-fw fa-refresh"></i></span>
          </a>

        </div>
        <div id="id_{{ model_name }}flow" class="layui-card-body">
          <ul id="{{ model_name }}_tree" class="ztree ztree-pure" style="overflow-y: auto;"></ul>
        </div>
      </div>
    </div>
    <div class="layui-col-md6">
      <table id="id_grid_{{ model_name }}" class="layui-hide" lay-filter="{{ model_name }}"></table>
      <script type="text/html" id="{{ model_name|safe }}_toolbar">
        <div class="layui-btn-container grid-toolbar" style="">
          <ul class="layui-nav"></ul>
        </div>
      </script>
    </div>
    <div class="layui-col-md4">
        <div class="layui-table-view">
            <div class="layui-table-tool">
                <div class="layui-btn-container">
                    <ul class="layui-nav">
                        <li class="layui-nav-item">
                            <a id="id_accgroups_move_to_group_1"
                               class="layui-btn layui-btn-sm"
                               lay-filter="move_group"
                               title="{% trans 'move_to_group_1' %}"
                               group="0" index="0" style="background-color: #d8dce1;color: #000000">{% trans 'move_to_group_1' %}
                            </a>
                        </li>
                        <span class="layui-nav-bar layui-hide" style="left: 65px; top: 30px; width: 0px; opacity: 0;"></span>
                    </ul>
                </div>
                <div id="id_empFrame">
                    <table class="layui-hide" id="id_group_employees" lay-filter="group_employees"></table>
                </div>
            </div>
        </div>
    </div>

  </div>
{% endblock %}

{% block grid_opt_update %}
    function update_side_ztree() {
        $('#{{ model_name }}_show_all').trigger('click');
    }

    $.extend(true, dimension, {
        actions: {
          GeneralActionNew: ['auto', 'auto'],
          GeneralActionDelete: ['auto', 'auto']
        }
    });

    $.extend(true, callback, {
        load: {
            done: $.fn.resize_side_ztree_if_any
        },
        edit: {
          done: update_side_ztree
        },
        delete: {
          done: update_side_ztree
        },
        actions: {
          GeneralActionNew: {
            done: update_side_ztree
          },
          GeneralActionDelete: {
            done: update_side_ztree
          }
        }
    });
    data_grid_opts["rowClick"] = function(obj){
        show_group_employee(obj.data.id, obj.data.group_no);
    }
{% endblock grid_opt_update %}
{% block actionAfterTableRender %}
  layui.use(['table', 'tablePlug', 'layer', 'flow'], function(){
    var table = layui.table, tablePlug = layui.tablePlug, layer=layui.layer, flow=layui.flow;
    tablePlug.smartReload.enable(true);
    function area_tree() {
      var setting = {
        view: {
          dblClickExpand: false,
          showLine: true
        },
        data: {
          simpleData: {
            enable: true
          }
        },
        check: {
          enable: false,
          chkboxType: {"Y": "ps", "N": "s"},
          radioType: "all"
        },
        callback: {
          onClick: onClick
        }
      };

      function onClick(event, treeId, treeNode) {
        table.reload('id_grid_{{ model_name }}', {where: {_p1_area__id__in: JSON.stringify([treeNode.id])}});
        layui.table.reload(group_employeeTB.config.id, {where: {group:0}});
        gloable_pm_codes = [];
      }
      $.ajax({
        url: "{% url 'biotime:personnel_area_tree_nodes_without_default' %}-1",
        type: "GET",
        dataType: "json",
        success: function (nodes) {
          var zTree = $.fn.zTree.init($("#{{ model_name }}_tree"), setting, nodes);
        }
      });
    }

    area_tree();

    $("#{{ model_name }}_show_all").click(function () {
      area_tree();
    });

    $("#{{ model_name }}_reset").click(function () {
      table.reload('id_grid_{{ model_name }}', {
        where: {

        }
      });
    });
  })
{% endblock %}

{% block function_js %}
    var current_group_id = 0;
    var current_group_no = 0;
    var group_employeeTB;
    var gloable_pm_codes = new Array();
    var table_data = new Array();

    function show_group_employee(group_id, group_no){
        current_group_id = group_id;
        current_group_no = group_no;
        layui.table.reload(group_employeeTB.config.id, {where: {group:group_id}});
        gloable_pm_codes = [];
    }
    var group_employees_opts = {
      id: "id_group_employees"
      ,url: '/acc/api/accprivileges/'
      , elem: "#id_group_employees"
      , cellMinWidth: 80
      , page: {
        layout: ['limit', 'prev', 'page', 'next', 'count'],
        curr: 1
      }
      , limits: [5, 10, 20, 50, 80, 100, 200]
      , limit: 20
      , text: {
        none: gettext("none_data")
      }
      , request: {
          pageName: 'page',
          limitName: 'page_size'
        }
    , where:{group:0}
      , cols: [[
            {field: 'id', title: "ID", width: "40", type: "checkbox"}
            , {field: 'emp_code', title: "{% trans 'emp_field_employeeCode' %}", width: "80", sort: true}
            , {field: 'emp_first_name', title: "{% trans 'emp_field_firstName' %}", width: "120", sort: true}
            , {field: 'emp_last_name', title: "{% trans 'emp_field_lastName' %}", width: "120", sort: true}
        ]]
      , data: []
      , smartReloadModel: true
      , done: function (res, curr, count) {
          //this.where = {};
            table_data = res.data;
            for(var i=0;i<res.data.length;i++){
                for(var j=0;j<gloable_pm_codes.length;j++){
                    if(res.data[i].id===gloable_pm_codes[j]){
                        res.data[i]["LAY_CHECKED"]='true';
                        var index= res.data[i]['LAY_TABLE_INDEX'];
                        $('#id_empFrame .layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                        $('#id_empFrame .layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                    }
                }
            }
            var checkStatus = layui.table.checkStatus('group_employees');
            if(checkStatus.isAll){
                $('#id_empFrame .layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                $('#id_empFrame .layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
            }
        }
    };

    layui.use(['form','table'], function () {
        var form = layui.form, table = layui.table;
        table.on('checkbox(group_employees)', function (obj) {
            console.log(obj);
            if(obj.checked===true){
               if(obj.type==='one'){
                   if (!gloable_pm_codes.includes(obj.data.id))
                        gloable_pm_codes.push(obj.data.id);
              }else{
                   for(var i=0;i<table_data.length;i++){
                       if (!gloable_pm_codes.includes(table_data[i].id))
                            gloable_pm_codes.push(table_data[i].id);
                   }
               }
            }else{
               if(obj.type==='one'){
                   for(var i=0;i<gloable_pm_codes.length;i++){
                      if(gloable_pm_codes[i]===obj.data.id){
                           gloable_pm_codes.remove(i);
                       }
                  }
               }else{
                   for(var j=0;j<table_data.length;j++){
                        for(var i=0;i<gloable_pm_codes.length;i++){
                            if(gloable_pm_codes[i]===table_data[j].id){
                                gloable_pm_codes.remove(i);
                                break;
                            }
                        }
                    }
               }
            }
        });

        Array.prototype.remove=function(dx)
        {
            if(isNaN(dx)||dx>this.length){return false;}
            for(var i=0,n=0;i<this.length;i++)
            {
                if(this[i]!=this[dx])
                {
                    this[n++]=this[i]
                }
            }
            this.length-=1
        };

        group_employeeTB = table.render(group_employees_opts);
        $('#id_accgroups_move_to_group_1').on('click', function () {
            if(gloable_pm_codes.length == 0)
            {
               layer.alert("{% trans 'select_none_employee' %}",
                    {title: gettext('layer_title'), icon: 5, time: 3000, btn: gettext("btn_confirm")});
            }
            else
            {
                if(current_group_no == 1)
                {
                    layer.alert("{% trans 'current_group_1' %}",
                        {title: gettext('layer_title'), icon: 5, time: 3000, btn: gettext("btn_confirm")});
                }
                else
                {
                    var url = '/acc/movetogroup1/';
                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: {ids:gloable_pm_codes.join(','), csrfmiddlewaretoken:$("input[name=csrfmiddlewaretoken]").val()},
                        dataType: 'json',
                        success: function (response) {
                            show_group_employee(current_group_id);
                        }
                    });
                }
            }
        });
    });

{% endblock %}